<script setup lang="ts">
import { ref, computed, h } from 'vue'
import { NCard, NForm, NFormItem, NInput, NButton, NSelect, NRadioGroup, NRadio, NAvatar, NTag, NRadioButton, NSpace, } from 'naive-ui'
import { showMsg } from '@/assets/utils/tools'
import baseCard from '@/components/base-card/index.vue'
import { useRouter } from 'vue-router';
import { FORM_SAVE,FORM_ADD,FORM_SAVE1 } from '../../service/apis/from';

const router = useRouter()

const formValue = ref({
    "数据项":'',
    "类型":'表单',
    "名称":'',
    "图标":'',
    "呈现":''
    
})
const loading = ref(false)

const options = ref([
    {
        label: '设置',
        value: 'https://07akioni.oss-cn-beijing.aliyuncs.com/07akioni.jpeg'
    },
    {
        label: 'wwwwwww',
        value: 'https://picsum.photos/id/1/100/100'
    },
    {
        label: 'eeeeeee',
        value: 'https://picsum.photos/id/3/100/100'
    },
    {
        label: 'wwwwwww',
        value: 'https://picsum.photos/id/1/100/100'
    },
    {
        label: 'eeeeeee',
        value: 'https://picsum.photos/id/3/100/100'
    },{
        label: 'wwwwwww',
        value: 'https://picsum.photos/id/1/100/100'
    },
    {
        label: 'eeeeeee',
        value: 'https://picsum.photos/id/3/100/100'
    },{
        label: 'wwwwwww',
        value: 'https://picsum.photos/id/1/100/100'
    },
    {
        label: 'eeeeeee',
        value: 'https://picsum.photos/id/3/100/100'
    }
])

const leiBie = ref([{
    value: '表单',
    label: '表单'
},
{
    value: '表格',
    label: '表格'
},
{
    value: '导入文件数据',
    label: '导入文件数据'
}])


const renderLabel = (option: any) => h(
    'div',
    {
        class: 'flex items-center ',
    },
    {
        default: () => [
            h(NAvatar, {
                src: option.value,
                round: true,
                size: 24,
                style: {
                    marginRight: '12px'
                }
            }),
        ],
    }
)

function  renderSingleSelectTag ({ option }: { option: any}){
    return h(
        'div',
        {
            style: {
                display: 'flex',
                alignItems: 'center',
                skk: "kdkkd"

            }
        },
        [
            h(NAvatar, {
                src: option.value,
                round: true,
                size: 24,
                style: {
                    marginRight: '12px'
                }
            }),

        ]
    )
}
//提交
const  submit = ()=> {
    loading.value = true
    console.log(formValue.value);
    if(check()){
        FORM_ADD({"params":JSON.stringify(formValue.value)}).then((res:any)=>{
            console.log('qignqiu',res);
            if(res.stacode == 200){
                reSetForm()
                loading.value = false
            //    setTimeout(()=>{
            //     loading.value = false
            //    },1000)
                showMsg('success','success')
            }
        }).catch((err:any)=>{
            console.log('err',err);
            loading.value = false
        })
 }
}

function reSetForm() {
    formValue.value.名称 = '';
    formValue.value.数据项 = ''
    formValue.value.呈现 = ''
    formValue.value.图标 = ''
}
function check () {
    if(formValue.value.名称 == '' || formValue.value.数据项 == '' || formValue.value.类型 == '' ||  formValue.value.图标 == ''){
        return false
    }else{
        return true
    }
}


const  dateJaJP = ()=> {
    // loading.value = true
    console.log(formValue.value);
    let ll= {
        "名称": "test",
        "图标": "test",
        "类型": "test",
        "描述": "test",
        "数据项": [
            {
                "名称": "单号",
                "类型": "string",
                "组件": "input",
            }
        ],
    }

    FORM_SAVE1({params:'ll' }).then((res:any)=>{
        console.log('httppppppppp',res);
    }).catch((err:any)=>{
        console.log('httppppppppp---',err);
    })
}



</script>
<template>
    <base-card title="设置数据填报项">
        <div style="min-width: 500px;width: 50%;margin: 0px auto;">

            <n-form-item label="数据项名称" path="user.name">
                <n-input v-model:value="formValue.数据项" type="textarea"
                    placeholder="在这里输入，需要填报的数据名称。例如:姓名、年龄、地址等。以空格或是逗号分隔。" />
            </n-form-item>
            <n-form-item label="类型" path="user.name">
                <n-radio-group v-model:value="formValue.呈现" name="radiogroup">
                    <n-space justify="start">
                        <n-radio v-for="lb in leiBie" :key="lb.value" :value="lb.value">
                            {{ lb.label }}
                        </n-radio>
                    </n-space>
                </n-radio-group>
            </n-form-item>
            <n-form-item label="模块名称" path="user.name">
                <n-input v-model:value="formValue.名称" type="text" placeholder="请输入模块名称" />
            </n-form-item>
            <n-form-item label="模块图标" path="user.name">
                <n-select v-model:value="formValue.图标" :render-label="renderLabel" :render-tag="renderSingleSelectTag"
                    filterable placeholder="请选择图标" :options="options" style="margin-right: 10px;" clearable/>
                <n-button value="large"> 上传图标</n-button>
            </n-form-item>
            <n-space justify="center"><n-button type="primary" value="large" @click="submit" :loading="loading">保存</n-button>
                <n-button type="primary" value="large" @click="dateJaJP" :loading="loading">保存11</n-button>
            </n-space>

        </div>

</base-card>
</template>

<style src="./index.scss" scoped></style>
